<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Dagre Layout</title>
  </head>
  <style>
    .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }
  </style>
  <body>
    <div id="mountNode"></div>
    <script src="../build/dagre.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [{
          id: '1',
          type: 'alps',
          name: 'alps_file1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: '2',
          type: 'alps',
          name: 'alps_file2',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: '3',
          type: 'alps',
          name: 'alps_file3',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: '4',
          type: 'sql',
          name: 'sql_file1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: '5',
          type: 'sql',
          name: 'sql_file2',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: '6',
          type: 'feature_etl',
          name: 'feature_etl_1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: '7',
          type: 'feature_etl',
          name: 'feature_etl_1',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        },
        {
          id: '8',
          type: 'feature_extractor',
          name: 'feature_extractor',
          conf: [{
            label: 'conf',
            value: 'pai_graph.conf'
          },
          {
            label: 'dot',
            value: 'pai_graph.dot'
          },
          {
            label: 'init',
            value: 'init.rc'
          }]
        }],
        edges: [{
          source: '1',
          target: '2'
        },
        {
          source: '1',
          target: '3'
        },
        {
          source: '2',
          target: '4'
        },
        {
          source: '3',
          target: '4'
        },
        {
          source: '4',
          target: '5'
        },
        {
          source: '5',
          target: '6'
        },
        {
          source: '6',
          target: '7'
        },
        {
          source: '6',
          target: '8'
        }]
      };

      G6.registerNode('sql', {
        drawShape(cfg, group) {
          const rect = group.addShape('rect', {
            attrs: {
              x: -75,
              y: -25,
              width: 150,
              height: 50,
              radius: 10,
              stroke: 'rgb(36,60,96)',
              fill: 'rgb(76,122,187)'
            }
          });
          if (cfg.name) {
            const label = group.addShape('text', {
              attrs: {
                text: cfg.name,
                x: 0,
                y: 0,
                fill: '#fff',
                fontSize: 14,
                textAlign: 'center',
                textBaseline: 'middle',
                fontWeight: 'bold'
              }
            });
          }
          return rect;
        }
      },
      'single-shape');
      G6.Global.nodeStateStyle.selected = {
        stroke: '#d9d9d9',
        fill: '#5394ef'
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 500,
        layout: {
          type: 'dagre',
          nodesepFunc: (d) => {
            if (d.id === '3') {
              return 500;
            }
            return 20;
          },
          // nodesep: 500,
          // ranksep: 200
        },
        defaultNode: {
          shape: 'sql'
        },
        defaultEdge: {
          shape: 'polyline',
          style: {
            radius: 20,
            offset: 45,
            endArrow: true,
            lineWidth: 5,
            stroke: 'rgb(76,122,187)'
          }
        },
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'click-select', {
            type: 'tooltip',
            formatText(model) {
              const cfg = model.conf;
              const text = [];
              cfg.forEach(row => {
                text.push(row.label + ':' + row.value + '<br>');
              });
              return text.join('\n');
            },
            shouldUpdate: e => {
              // 如果移动到节点文本上显示，不是文本上不显示
              if (e.target.type !== 'text') {
                return false;
              }
              return true;
            }
          }]
        },
        fitView: true
      });
      graph.data(data);
      graph.render();
    </script>
  </body>

</html>